"use client";
import SmallCar from "@/components/home/Main/UsersSay/SmallCar";
import { DataList } from "@/types/DataList";
import "./index.css";
import { useEffect, useState } from "react";
import { faker } from "@faker-js/faker";
export default function UsersSay({}) {
  function createRandomUser() {
    return {
      id: faker.string.uuid(),
      icon: Math.random() < 0.5 ? "/info/right-icon.png" : "/twitter-logo.png",
      avatar: faker.image.avatar().toString(),
      username: faker.internet.userName(),
      description: "Founder of ShipFast",
      content: [
        {
          id: "1",
          content: faker.lorem.paragraph(2),
          content2: faker.lorem.paragraph(),
          _name: [],
        },
        {
          id: "2",
          content: "",
        },
      ],
      video: Math.random() < 0.5 ? "/video/111.mp4" : "",
      time: faker.date.anytime() + "",
      like: faker.number.int(100),
    };
  }
  const cardDataList = faker.helpers.multiple(createRandomUser, { count: 30 });
  console.log(cardDataList);
  const [CardDataList, setCardDataList] = useState<DataList[]>([
    {
      id: "1",
      icon: "",
      avatar: "/info/a.webp",
      username: "Marc Lou",
      description: "Founder of ShipFast",
      content: [
        {
          id: "1",
          content:
            "I discovered 6 new marketing channels I never thought of thanks to Marketing Strategy Generator.",
          content2: "The Distribution Ideas part is a banger.",
          _name: [],
        },
        {
          id: "2",
          content: "",
        },
      ],
      video: "/video/111.mp4",
      time: new Date() + "",
      like: faker.number.int(100),
    },
    {
      id: "2",
      icon: "/info/right-icon.png",
      avatar: "/info/a.webp",
      username: "Marc Lou",
      description: "Founder of ShipFast",
      content: [
        {
          id: "1",
          content:
            "Tested it and it's also a great tool for generating upsell/downsell or free lead magnet products for your target SaaS customers!",
          content2: "Congrats on the launch ! 👏🏼",
          _name: ["bacv", "kronop"],
        },
        {
          id: "2",
          content: "",
        },
      ],
      video: "",
      time: new Date() + "",
      like: faker.number.int(100),
    },
    {
      id: "3",
      icon: "/info/right-icon.png",
      avatar: "/info/a.webp",
      username: "Marc Lou",
      description: "Founder of ShipFast",
      content: [
        {
          id: "1",
          content:
            "I discovered 6 new marketing channels I never thought of thanks to Marketing Strategy Generator.",
        },
        {
          id: "2",
          content: "",
        },
      ],
      video: "",
      time: new Date() + "",
      like: faker.number.int(100),
    },
    {
      id: "4",
      icon: "/info/right-icon.png",
      avatar: "/info/a.webp",
      username: "Marc Lou",
      description: "Founder of ShipFast",
      content: [
        {
          id: "1",
          content:
            "After launching my paid newsletter, I struggled to prioritize the core concerns of my ideal audience and decide which to highlight on my sales page.",
          content2:
            "Dan and Sveta's product addressed this and provided the solution in less than 5 minutes.",
        },
        {
          id: "2",
          content: "Marketing Strategy Generator was a lifesaver.Thank you 🙏.",
        },
      ],
      video: "",
      time: new Date() + "",
      like: faker.number.int(100),
    },
    {
      id: "5",
      icon: "/info/right-icon.png",
      avatar: "/info/a.webp",
      username: "Marc Lou",
      description: "Founder of ShipFast",
      content: [
        {
          id: "1",
          content:
            "I discovered 6 new marketing channels I never thought of thanks to Marketing Strategy Generator.",
        },
        {
          id: "2",
          content: "",
        },
      ],
      video: "",
      time: new Date() + "",
      like: faker.number.int(100),
    },
    {
      id: "6",
      icon: "/info/right-icon.png",
      avatar: "/info/a.webp",
      username: "Marc Lou",
      description: "Founder of ShipFast",
      content: [
        {
          id: "1",
          content:
            "I discovered 6 new marketing channels I never thought of thanks to Marketing Strategy Generator.",
        },
        {
          id: "2",
          content: "",
        },
      ],
      video: "",
      time: new Date() + "",
      like: faker.number.int(100),
    },
    {
      id: "7",
      icon: "/info/right-icon.png",
      avatar: "/info/a.webp",
      username: "Marc Lou",
      description: "Founder of ShipFast",
      content: [
        {
          id: "1",
          content:
            "I discovered 6 new marketing channels I never thought of thanks to Marketing Strategy Generator.",
        },
        {
          id: "2",
          content: "",
        },
      ],
      video: "",
      time: new Date() + "",
      like: faker.number.int(100),
    },
  ]);
  return (
    <div className="width-w mx-auto mt-[120px]">
      <h1 className="text-[rgba(36,99,235,1)] text-[40px] font-[800] mb-[80px]">
        Here&apos;s what our users say
      </h1>
      <div className="container">
        {cardDataList.map((Card) => {
          return <SmallCar key={Card.id} cardData={Card} />;
        })}
      </div>
    </div>
  );
}
